<template>
	<view class="m-input flex-between" :class="[className]" :style="[style]" @click.stop="clickHandle">
		<!-- <view class="line" v-if="isLine"></view> -->
		<view class="left">
			<template v-if="icon">
				<m-icon spa="0 10 0 0" wh="40" :color="iconColor" :type="icon"></m-icon>
			</template>
			<slot name="left"></slot>
		</view>
		<view class="content">
			<input v-model="str" @input="onChange" @blur="onBlur" @focus="onFocus" @confirm="onConfirm"
				:disabled="disabled" :placeholder="placeholder" :password="type == 'password'?isPwd:undefined "
				placeholder-class="placeholder">
		</view>
		<view class="right flex">
			<template v-if="type== 'password'">
				<m-icon :type="isPwd?'icon-yanjing_yincang':'icon-yanjing_xianshi'" wh="30" @click="isPwd = !isPwd"></m-icon>
			</template>
			<template v-else>
				<template v-if="clear && str">
					<m-icon type="icon-guangbi-shiyuan" wh="30" @click="onClear"></m-icon>
				</template>
			</template>
			<slot name="right"></slot>
		</view>
		<!-- 
		<view class="hint ">
			<text>错误</text> 
		</view> -->
	</view>
</template>
<script>
	export default {
		name: "m-input",
		data() {
			return {
				isActive: false,
				isPwd: true,
				pwdType: 'password',
				str: '',
			};
		},
		props: {
			type: {
				type: String,
				default: 'text'
			},
			className: {
				type: String,
				default: ''
			},
			disabled: {
				type: Boolean,
				default: false
			},
			isLine: {
				type: Boolean,
				default: true
			},
			clear: {
				type: Boolean,
				default: false
			},
			placeholder: {
				type: String,
				default: ""
			},
			//图标颜色
			iconColor: {
				type: String,
				default: "#999"
			},
			//图标
			icon: {
				type: String,
				default: ""
			},
			gap: {
				default: '22 18',
				type: String,
			},
			spa: {
				default: '0',
				type: String,
			},
			bgColor: {
				default: '#F2F2F7',
				type: String,
			},
			border: {
				default: '#E7E7E7',
				type: String,
			},
			bottomBorder: {
				type: Boolean,
				default: false
			},
			value: "",
		},
		watch: {
			value: {
				immediate: true,
				handler(val, oldVal) {
					this.str = val;
				},
			},
		},
		computed: {
			style() {
				const gap = this.gap.split(" ").filter(x => x);
				const spa = this.spa.split(" ").filter(x => x);
				const radius = this.radius.split(" ").filter(x => x);
				return {
					padding: gap.map(n => `${n}rpx`).join(' '),
					margin: spa.map(n => `${n}rpx`).join(' '),
					borderRadius: this.bottomBorder?0:radius.map(n => `${n}rpx`).join(' '),
					background: this.bottomBorder ? "unset" : this.bgColor,
					border: `${ this.bottomBorder?'0rpx':'1rpx'} solid ${this.border}`,
					borderBottomWidth: '1rpx',
					borderBottomColor: this.border,
				}
			},
		},
		methods: {
			onChange({ detail: { value } }) {
				this.$emit('input', value);
				this.$emit('onChange', value);
				this.formValidate2("change");
			},
			onBlur({ detail: { value } }) {
				this.$emit('onBlur', value);
				this.isActive = false;
			},
			onFocus() {
				this.isActive = true;
			},
			onClear() {
				this.$emit('input', '');
				this.$emit('onClear', '');
				this.formValidate2("change");
			},
			onConfirm() {

			},
			formValidate2(event) {
				const form = this.mParent('m-form')
				const formItem = this.mParent('m-formItem')
				// 如果发生变化的input或者textarea等，其父组件中有u-form-item或者u-form等，就执行form的validate方法
				// 同时将form-item的pros传递给form，让其进行精确对象验证
				if (formItem && form) {
					form.validateField(formItem.prop, () => {}, event)
				}
			},
		},
	}
</script>

<style lang="scss">
	.m-input {

		align-items: center;
		border-radius: 10rpx;
		position: relative;
		transition: all .2s;

		.line {
			transition: all .3s;
			left: 0;
			position: relative;
			position: absolute;
			left: 0;
			bottom: 0;
			height: 1rpx;
			width: 100%;
			background: var(--border);
		}

		.left {}

		.content {
			flex: 1;
			position: relative;

			input,
			textarea {
				width: 100%;
				font-size: var(--fs_28);
				color: var(--text);
				font-family: PingFang SC;
				font-weight: 400;
			}

			/deep/ .mIcon {
				position: absolute;
				top: 50%;
				right: 20rpx;
				transform: translateY(-50%);
			}
		}

		.right {
			
		}




		.placeholder {
			font-size: 26rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #999999;
		}

		.hint {
			position: absolute;
			left: 0;
			bottom: -50rpx;
			color: var(--error);
			font-size: var(--fs_28);
		}
	}

	.isActive {
		// border-color: #225CF3;
		// .line{
		// 	background: #225CF3;
		// }
	}
</style>